<template>
    <div class="scroll-list-wrap">
        <cube-scroll
            ref="scroll"
            :options="options"
            @pulling-down="onPullingDown"
            @pulling-up="onPullingUp">
                <slot></slot>
        </cube-scroll>
    </div>
</template>


<style lang="stylus">
.scroll-list-wrap{
    height 100%
}
.scroll-list-wrap{
    .cube-pulldown-wrapper .after-trigger .cube-pulldown-loaded{
        font-size 12px
    }
}
</style>


<script>
export default {
    props:{
        forceUpdate:{
            type:Boolean,
            default:false
        }
    },
    data(){
        return{
            pullDownRefresh: true,
            pullDownRefreshThreshold: 60,
            pullDownRefreshStop: 40,
            pullDownRefreshTxt: '刷新成功',
            pullUpLoad: false,
            pullUpLoadThreshold: 0,
            pullUpLoadMoreTxt: 'Load more',
            pullUpLoadNoMoreTxt: 'No more data',
            customPullDown: false
        }
    },
    computed: {
        options() {
            return {
                pullDownRefresh: this.pullDownRefreshObj,
                pullUpLoad: this.pullUpLoadObj,
                scrollbar: true
            }
        },
        pullDownRefreshObj: function() {
        return this.pullDownRefresh ? {
            threshold: parseInt(this.pullDownRefreshThreshold),
            // Do not need to set stop value, but you can if you want
            // stop: parseInt(this.pullDownRefreshStop),
            txt: this.pullDownRefreshTxt
        } : false
        },
        pullUpLoadObj: function() {
        return this.pullUpLoad ? {
            threshold: parseInt(this.pullUpLoadThreshold),
            txt: {
            more: this.pullUpLoadMoreTxt,
            noMore: this.pullUpLoadNoMoreTxt
            }
        } : false
        }
    },
    methods:{
        onPullingDown() {
            // 模拟更新数据
            setTimeout(() => {
            if (Math.random() > 0.5) {
                // 如果有新数据
                this.$emit('onPullingDown')
                if(this.forceUpdate){
                    this.$refs.scroll.forceUpdate()
                }
            } else {
                // 如果没有新数据
                this.$refs.scroll.forceUpdate()
            }
            }, 1000)
        },
        onPullingUp() {
            // 模拟更新数据
            setTimeout(() => {
            if (Math.random() > 0.5) {
                // 如果有新数据
                // let newPage = _foods.slice(0, 5)
                // this.items = this.items.concat(newPage)
            } else {
                // 如果没有新数据
                this.$refs.scroll.forceUpdate()
            }
            }, 1000)
        },
    }
}
</script>
